<template>
	<view class="memory-create">

		<view class="top" style="z-index: 2;">
			<uni-icons style="margin-left: 20rpx;" type="left" size="25" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view>{{islandInfo.name}}</view>
			<view @click="createOrUpdatePost(0)" style="margin-right: 30rpx;"
				:style="{'color': post.content && post.content != '' ? islandInfo.theme : '#9f9f9f' }">发送</view>
		</view>

		<view class="textarea-box">
			<textarea :show-confirm-bar="false" class="textarea" v-model="post.content" placeholder="写下生活与理想"
				maxlength="-1" placeholder-style="color:#c1c1c1"></textarea>
		</view>
		<view class="media">
			<view class="picture" :style="{'margin-right' : (index+1)%3 == 0 ? '0' : '15rpx' }"
				v-for="(item,index) in post.pictures" :key="index" @tap="ViewImage" :data-url="post.pictures[index]">
				<image mode="aspectFill" style="width: 100%;height: 100%;" :src="post.pictures[index]"></image>
				<view class="media-icon" @tap.stop="DelImg(index)">
					<uni-icons type="close" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>
			<view v-if="post.videos" class="video" v-for="(item,index) in post.videos" :key="index">
				<video style="width: 100%;height: 100%;" :src="post.videos[index]"></video>
				<view class="media-icon" @tap.stop="DelVideo(index)">
					<uni-icons type="close" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>
			<!-- 			<view class="media-add" @tap="chooseMedia"
				v-if="post.pictures && post.pictures.length < 9 || post.videos && post.videos.length < 1">
				<uni-icons type="camera" size="30" color="#2c2c2c"></uni-icons>
			</view> -->
		</view>

		<view class="links">
			<view class="link" v-for="(item,index) in post.links">
				<uni-icons type="link" size="30" color="#A6A6A6"></uni-icons>
				<view style="margin-left: 20rpx;">{{item.title}}</view>

				<view class="link-icon" @tap.stop="delLink(index)">
					<uni-icons type="close" size="25" color="#A6A6A6"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="types">
			<view class="link" v-for="(item,index) in post.links">
				<uni-icons type="link" size="30" color="#A6A6A6"></uni-icons>
				<view style="margin-left: 20rpx;">{{item.title}}</view>
		
				<view class="link-icon" @tap.stop="delLink(index)">
					<uni-icons type="close" size="25" color="#A6A6A6"></uni-icons>
				</view>
			</view>
		</view>


		<view class="insert-buttons">
			<view style="display: flex;flex-direction: row;margin-left: 30rpx;">
				<view class="insert-button" @click="chooseMedia('image')">
					<uni-icons type="image" size="32" color="#3f3f3f"></uni-icons>
				</view>
				<view class="insert-button" @click="chooseMedia('video')">
					<uni-icons type="videocam" size="32" color="#3f3f3f"></uni-icons>
				</view>
				<view class="insert-button" @click="chooseLink()">
					<uni-icons type="link" size="32" color="#3f3f3f"></uni-icons>
				</view>
			</view>

			<view class="insert-button" @click="changeVisialbe()">
				<uni-icons v-if="post.visibility==0" type="eye-slash" size="32" color="#3f3f3f">
				</uni-icons>
				<uni-icons v-if="post.visibility==1" type="eye" size="32" color="#3f3f3f">
				</uni-icons>
				<uni-icons v-if="post.visibility==2" type="eye-filled" size="32" color="#3f3f3f">
				</uni-icons>
				<view style="margin-left: 20rpx;">{{post.visibility == 0 ? '自己可见' : post.visibility == 1 ? '关注可见' : '公开可见'}}</view>
			</view>
		</view>

		<!-- 		<view class="tags">
			<view class="tag-area">
				<view class="tag" @click="changeVisialbe(1)">
					<uni-icons v-if="post.visibility == 1" type="checkmarkempty" size="20"
						:style="{'color' : islandInfo.theme }"></uni-icons>
				</view>
				<view style="margin-left: 20rpx;">仅关注可见</view>
			</view>

			<view class="tag-area">
				<view class="tag" @click="changeVisialbe(0)">
					<uni-icons v-if="post.visibility == 0" type="checkmarkempty" size="20"
						:style="{'color' : islandInfo.theme }"></uni-icons>
				</view>
				<view style="margin-left: 20rpx;">仅自己可见</view>
			</view>
		</view> -->





		<view class="emptyWarn animation-fade" v-show="showWarn">您输入的内容为空</view>

		<uni-popup ref="mediaType" type="left">
			<view class="modal-box media-type">
				<view class="modal-title">选择照片或视频</view>
				<view class="modal-operations">
					<view @click="chooseMedia('image')">图片</view>
					<!-- <view @click="chooseMedia('video')">视频</view> -->
					<upload-auth @click="chooseMedia('video')" @succeed="onUploadSucceed"
						@uniChooseComplete="finishVideoChoose" />
				</view>
			</view>
		</uni-popup>

		<!-- 		<view class="footer">

			<view v-if="!post.id" class="footer-item" style="width: 150rpx;" @click="createOrUpdatePost(1)">
				<view
					style="height: 70rpx;width: 70rpx;background-color: #F2F2F2;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<uni-icons type="folder-add" size="25" color="#A6A6A6"></uni-icons>
				</view>
				<view style="font-size: 24rpx;color: #A6A6A6;margin-top: 10rpx;">存草稿</view>
			</view>

			<view class="footer-item">
				<view class="footer-button" :style="{'background-color' : islandInfo.theme }"
					@click="createOrUpdatePost(0)">
					{{post.id ? '更新帖子' : '新增帖子'}}
				</view>
			</view>
		</view> -->


		<uni-popup ref="menu" type="bottom">
			<view class="modal-catalogs">
				<view class="courses">
					<view v-for="(item,index) in islandInfo.courses" :key="index">
						<view @click="changeCourse(index)" class="course"
							:class="index == currentCourseIndex ? 'course-current': '' "
							:style="{'background-color': index == currentCourseIndex ? islandInfo.theme : ''}">
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="catalogs">
					<view v-for="(catalog,index) in chapters" :key="catalog.id">
						<view class="catalog" @click="handleIsShowIndex(index)">
							<view>
								{{catalog.name}}
							</view>
							<view>
								<uni-icons type="bottom" size="20" color="#ADAAAA" v-if="!isShowIndex[index]">
								</uni-icons>
								<uni-icons type="top" size="20" color="#ADAAAA" v-if="isShowIndex[index]">
								</uni-icons>
							</view>
						</view>
						<view v-if="isShowIndex[index]" class="section">
							<view v-for="(section,index) in catalog.sections" :key="index" style="margin-top:25rpx;">
								<view @click="addLink(1,section)"
									style="margin-left: 20rpx;display: flex;flex-direction: row;justify-content: space-between;">
									<view style="width: 84%;">{{section.name}}</view>
								</view>

								<view v-for="(content,contentIndex) in section.contents" :key="content.id">
									<view @click="addLink(2,section,content)"
										style="display: flex;flex-direction: row;align-items: center;margin-left: 40rpx;margin-top:15rpx;">
										<!-- <view style="height: 100%;display: flex;flex-direction: row;align-items: center;width: 12%;">
											<view class="type">{{contentType[content.type]}}</view>
										</view> -->
										<view style="width: 86%;">
											<view class="name">{{contentIndex == 0 ? '本节介绍' : content.name}}</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss'
	import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import UploadAuth from '@/components/upload-auth.vue'
	export default {
		components: {
			uniPopup,
			UploadAuth
		},
		data() {
			return {
				showWarn: false,
				islandId: "",
				islandInfo: {},
				mediaType: '',
				post: {
					content: "",
					pictures: [],
					videos: [],
					visibility: 2,
					type: 1,
					links: [],
					isDraft: 0
				},


				currentCourseIndex: 0,
				contentType: ["文本", "视频", "题目"],
				isShowIndex: [true, true],
				chapters: []
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.islandInfo.id = options.islandId
				this.getIslandInfo()
				this.getPostDraftInfo()
			}

			if (options.postId) {
				this.post.id = options.postId
				this.getPostEditInfo()
			}

		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data;
					this.$forceUpdate()
				})
			},
			getPostDraftInfo() {
				this.$api.getPostDraftInfo({
					islandId: this.islandInfo.id
				}).then((res) => {
					if (res.data != null) {
						this.post = res.data
					}
				});
			},
			getPostEditInfo() {
				this.$api.getPostEditInfo({
					id: this.post.id
				}).then((res) => {
					this.post = res.data
				});
			},



			chooseLink() {
				this.$refs.menu.open('bottom')
				this.getDetailCourseDirs(this.islandInfo.courses[this.currentCourseIndex].id)
			},
			changeCourse(index) {
				this.currentCourseIndex = index
				this.getDetailCourseDirs(this.islandInfo.courses[this.currentCourseIndex].id)
			},
			getDetailCourseDirs(courseId) {
				this.$api.getDetailCourseDirs({
					courseId
				}).then(res => {
					console.log("目录", res)
					this.chapters = res.data;
				})
			},
			addLink(type, section, sectionContent) {
				if (type == 1) {
					this.post.links.push({
						link: '/pages_being/course/section-study?sectionId=' + section.id,
						type: type,
						title: section.name
					})
				}
				if (type == 2) {
					this.post.links.push({
						link: '/pages_being/course/section-comment?contentId=' + sectionContent.id,
						type: type,
						title: section.name + "-" + sectionContent.name
					})
				}
				this.$refs.menu.close('bottom')
			},




			choseTag(id) {
				this.post.tagId = id
			},
			openMedia(type) {
				if (type === 'image') {
					uni.chooseImage({
						count: 9 - this.post.pictures.length, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							UploadOss.uploadFile(res).then(res => {
								this.post.pictures.push(res)
								this.$refs.mediaType.close('bottom')
							})
						}
					});
				} else if (type === 'video') {
					// upload-auth 进行
				} else {
					this.$refs.mediaType.open('bottom')
				}
			},
			finishVideoChoose() {
				this.$refs.mediaType.close('bottom')
				// this.post.videos.push({}) // 空白图占位，上传成功后展示视频
			},
			onUploadSucceed(info) {
				// this.post.videos.pop()
				console.log(827, info)
			},
			chooseMedia(type = '') {
				if (type === '') {
					this.openMedia(this.mediaType)
				} else {
					this.mediaType = type
					this.openMedia(type)
				}
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.post.pictures,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(index) {
				this.post.pictures.splice(index, 1)
			},
			DelVideo(index) {
				this.post.videos.splice(index, 1)
			},
			delLink(index) {
				this.post.links.splice(index, 1)
			},
			createOrUpdatePost(isDraft) {
				this.post.islandId = this.islandInfo.id
				this.post.isDraft = isDraft
				if (this.post.id) {
					this.$api.updatePost(this.post)
						.then((res) => {
							uni.showToast({
								icon: 'success',
								title: "保存成功",
								duration: 500
							})
							uni.navigateBack()
						});
				} else {
					if (this.post.content == "" && this.post.pictures.length == 0) {
						uni.showModal({
							title: "提示",
							content: "内容不能为空"
						})
					} else {
						this.$api.createPost(this.post)
							.then((res) => {
								uni.showToast({
									icon: 'success',
									title: "保存成功",
									duration: 500
								})
								uni.navigateBack()
							});
					}

				}

			},
			changeVisialbe() {
				let visibility = this.post.visibility - 1
				if (visibility >= 3) {
					visibility = 0
				}
				if (visibility <= -1) {
					visibility = 2
				}
				this.post.visibility = visibility
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
		},
		onNavigationBarButtonTap(e) {
			const text = this.post.content
			if (text === '') {
				console.log('输入为空')
				this.showWarn = true
				setTimeout(() => {
					this.showWarn = false
				}, 3500)
			} else {
				console.log('输入的内容为' + this.post)
				this.createPost()
				uni.navigateBack({})
			}
		},
	}
</script>

<style scoped lang="scss">
	.memory-create {

		.top {
			position: sticky;
			top: 0;
			background-color: white;
			// border-bottom: solid thin #c8c8c8;


			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}


		.textarea {
			width: 690rpx;
			min-height: 500rpx;
			padding: 30rpx;
			color: #000;
			font-size: 32rpx;
		}


		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 10rpx;
				background-color: #6AB9C0;
				text-align: center;
				color: white;

				width: 40%;
			}

		}

		.links {
			display: flex;
			flex-direction: column;
			width: 690rpx;
			margin-left: 30rpx;

			.link {
				width: 630rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				background-color: #F5F6F8;

				display: flex;
				flex-direction: row;
				align-items: center;

				position: relative;

				.link-icon {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}

			}
		}

		.insert-buttons {
			position: fixed;
			bottom: 0;

			width: 750rpx;
			height: 100rpx;
			border-top: solid thin #C3C3C3;
			border-bottom: solid thin #C3C3C3;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.insert-button {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 30rpx;
			}
		}


		.media {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.media-icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}

			.picture {
				position: relative;
				height: 220rpx;
				width: 220rpx;
				margin-right: 15rpx;
				margin-bottom: 10rpx;

				border-radius: 10rpx;
				overflow: hidden;
			}

			.video {
				border-radius: 10rpx;
				overflow: hidden;
			}

			.media-add {
				height: 220rpx;
				width: 220rpx;
				border: solid thin #dfdfdf;
				border-radius: 10rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

		}

		.tags {
			padding-top: 20rpx;

			.tag-area {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;

				.tag {
					height: 40rpx;
					width: 40rpx;
					border: solid thin #d4d4d4;
					border-radius: 10rpx;
					margin-left: 30rpx;

					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}

			}
		}

		.footer {
			position: fixed;
			background-color: #ffffff;
			height: 150rpx;

			width: 100%;
			bottom: 0;
			z-index: 3;
			border-top: solid thin #e7e7e7;

			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;

			.footer-item {
				width: 650rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.text {
					font-size: 46rpx;
					font-weight: bold;

				}

				.footer-button {
					padding: 0 200rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #5DACB1;
					border-radius: 50rpx;
					color: white;
				}
			}
		}

		.modal-catalogs {

			width: 100%;
			height: 880rpx;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			padding-top: 40rpx;

			.catalogs {
				display: flex;
				flex-direction: column;
				width: 670rpx;
				margin: 0 40rpx 40rpx 40rpx;
				height: 840rpx;
				overflow-y: scroll;

				.catalog {
					display: flex;
					flex-direction: row;
					margin-top: 40rpx;
					justify-content: space-between;

				}
			}

			.courses {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;

				.course {
					margin-left: 30rpx;
					color: #2c2c2c;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					padding: 3rpx 20rpx;

					background-color: #F5F6F8;
					border-radius: 15rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.course-current {
					color: white;
				}
			}
		}
	}

	.emptyWarn {
		text-align: center;
		background-color: #d1d1d1;
		padding: 30rpx;
		width: 450rpx;
		border-radius: 70rpx;
		position: fixed;
		bottom: 150rpx;
		left: 150rpx;
	}
</style>
